<template>
  <div style="position: relative;min-height: 900px;background-color: white;">
    <div class="content">
      <div class="box">
        <img src="/images/userIcon.png" alt="" />
        <div>{{ userInfo.name || "爱喝汽水的小熊" }}</div>
      </div>
    </div>
    <div class="content footer" style="border: none;">
      <div :class="{ 'list-box': true, 'active': active === '1' }" @click="select('1')">
        <div class="vertical-line" v-show="active === '1'" /><span>
          个人资料
        </span>
      </div>
      <div :class="{ 'list-box': true, 'active': active === '2' }" @click="select('2')">
        <div class="vertical-line" v-show="active === '2'" />
        <span>学生信息</span>
      </div>
      <div :class="{ 'list-box': true, 'active': active === '3' }" @click="select('3')">
        <div class="vertical-line" v-show="active === '3'" />
        <span>我的志愿表</span>
      </div>
    </div>
    <div class="quit">
      退出登录
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { computed, ref } from "vue";
const store = useStore();
const userInfo = computed(() => {
  return store.getters["userStore/userInfo"];
});
const emit = defineEmits(["select"]);
const active = ref<string>("1");
const select = (type: string) => {
  active.value = type;
  emit("select", type)
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
